<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Work</title>
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet/less" href="./css/reset.less">
  <link rel="stylesheet/less" href="./css/common.less">
  <link rel="stylesheet/less" href="./css/work.css">
</head>

<body>
  <!-- todo header -->
  <header id="header" class="auto_container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="./images/logo.png" alt="">
          </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <!-- ! 右侧导航 -->
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html" class="text-up">home</a></li>
            <li><a href="about.html" class="text-up">about</a></li>
            <li><a href="work.html" class="text-up">work</a></li>
            <li><a href="process.html" class="text-up">process</a></li>
            <!-- <li><a href="#" class="text-up">services</a></li>
            <li><a href="#" class="text-up">testimonials</a></li> -->
            <li><a href="contact.html" class="text-up">contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </header>
 
  <!-- todo breakfast -->
  <section id="breakfast" class="auto_container">
    <div class="row">
      <div class="item col-md-6 nopadding">
        <h2>Light Breakfast</h2>
        <p>
          Light his can't a creeping. Be, bring blessed night. Replenish 
          blessed creature good. Saw earth every creepeth lights day, 
          divided abundantly form. In. Said given lights. Sixth the male. 
          Upon their multiply. Kind beast. Him tree upon.
        </p>
        <p>
          Cattle. Dominion day herb she'd creeping divide darkness. 
          Which. Subdue had.
        </p>
        <p>
          <b>Client:</b> Emma Morris
        </p>
        <p>
          <b>Date:</b> &nbsp; 25.06.2017
        </p>
        <p>
          <b>Share:</b> Facebook, Twitter, Pinterest
        </p>
      </div>
      <div class="item col-md-6 nopadding">
        <img src="./images/04_Project-Single_03.png" alt="" class="auto_container">
      </div>
    </div>
  </section>

  <!-- todo footer -->
  <footer id="footer" class="auto_container">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12 items">
          <b>Piroll Design, Inc.</b>
          <p>© 2017 Piroll. All rights reserved. <br> Designed by robirurk.</p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 items">
          <p>hello@pirolltheme.com</p>
          <p>+44 987 065 908</p>
        </div>
        <ul class="col-md-1 col-sm-3 col-xs-6 items">
          <li>
            <a href="javascript:;">Projects</a>
          </li>
          <li>
            <a href="javascript:;">About</a>
          </li>
          <li>
            <a href="javascript:;">Services</a>
          </li>
          <li>
            <a href="javascript:;">Carreer</a>
          </li>
        </ul>
        <ul class="col-md-1 col-sm-3 col-xs-6 items">
          <li>
            <a href="javascript:;">News</a>
          </li>
          <li>
            <a href="javascript:;">Events</a>
          </li>
          <li>
            <a href="javascript:;">Contact</a>
          </li>
          <li>
            <a href="javascript:;">Legals</a>
          </li>
        </ul>
        <ul class="col-md-2 col-sm-6 col-xs-12 items">
          <li>
            <a href="javascript:;">Facebook</a>
          </li>
          <li>
            <a href="javascript:;">Twitter</a>
          </li>
          <li>
            <a href="javascript:;">Instagram</a>
          </li>
          <li>
            <a href="javascript:;">Dribbble</a>
          </li>
        </ul>
      </div>
    </div>
  </footer>



  <!-- ! less -->
  <script src="./js/less.min.js"></script>
  <!-- ! jq -->
  <script src="./js/jquery.min.js"></script>
  <!-- ! bootstrap -->
  <script src="./js/bootstrap.min.js"></script>
</body>

</html>